<template>
  <div class="courseEdit">
    <div class="title">
      <div style="min-width: 250px">
        <el-button style="margin: 0 10px 0 5px" @click="handleSave" v-if="(isMyCaeate || isOtherDesiger) && canEdit">保存</el-button>
        <!-- <el-button
          style="margin-left: 20px"
          slot="reference"
          @click="handleCheckIsLock"
          v-if="canEdit"
          >{{
            currData.state === "已发布" || currData.state === "已修改未发布"
              ? "再次发布"
              : "发布任务"
          }}</el-button
        > -->
        <el-popconfirm
          title="是否发布课程信息？已开设课程数据将与当前更新数据同步"
          @confirm="handlePubCourseInfo"
          ref="popPub"
          v-if="(isMyCaeate || isOtherDesiger) && canEdit && isContinuousPublish"
        >
          <el-button style="margin: 0 10px 0 5px" slot="reference">{{
            "发布课程"
          }}</el-button>
        </el-popconfirm>
        <el-checkbox
          v-model="saveAll"
          label="包含所有任务组和任务"
          v-if="(isMyCaeate || isOtherDesiger) && canEdit && isContinuousPublish"
        />
      </div>
      <div>
        {{ (isMyCaeate || isOtherDesiger) && canEdit ? "正在编辑课程信息" : "正在浏览课程信息" }}
      </div>
      <div style="width: 250px" />
    </div>
    <div class="contentBox">
      <div
        class="info"
        :style="[{ 'padding-top': (isMyCaeate || isOtherDesiger) && canEdit ? '11px' : '40px' }]"
      >
        <div class="inputTips" v-if="(isMyCaeate || isOtherDesiger) && canEdit">
          <div title="必填">
            <span class="mustInput">*</span>
            为必填项
          </div>
          <!-- <div title="选填">
            <span class="choiceInput">*</span>
            为选填项
          </div> -->
        </div>
        <div class="courseNameBox">
          <div class="coursePic">
            <div class="courseIconPath">
              <div
                class="startMustTips"
                title="必填"
                v-if="(isMyCaeate || isOtherDesiger) && canEdit && currData.iconPath == ''"
              >
                *
              </div>
              <uploadFile
                :acceptTpye="'.jpg,.jpeg,.png,.svg'"
                :tips="'请插入图片'"
                :uploadComponentName="'cover'"
                @uploadDataChange="uploadDataChange"
                :currData="currData"
                :isMyCaeate="false"
                :canEdit="false"
                key="cover"
                title="课程封面"
              />
              <uploadIcon
                @uploadDataChange="uploadDataChange($event, 'cover')"
                :parentIconList="parentIconList"
                :currData="currData"
                :uploadComponentName="'cover'"
                key="course"
                :saveName="'courseIcon'"
                :isMyCaeate="isMyCaeate"
                :isOtherDesiger="isOtherDesiger"
                :canEdit="canEdit"
                class="uploadIconComponent"
              />
            </div>
          </div>
          <div class="courseName">
            <div
              class="startMustTips"
              title="必填"
              v-if="(isMyCaeate || isOtherDesiger) && canEdit && currData.name == ''"
            >
              *
            </div>
            <div class="inputName">课程名称</div>
            <el-input
              v-model="currData.name"
              placeholder="请输入课程名称"
              @input="handelChange('name')"
              :disabled="((!isMyCaeate && !isOtherDesiger) && !isOtherDesiger) || !canEdit"
              title="课程名称"
            ></el-input>
          </div>
        </div>
        <div class="continuousRelease">
          <span class="mainDesignTeamName">持续发布：</span>
          <el-select
            v-model="currData.isContinuousPublish"
            placeholder="请选择是否持续发布"
            :disabled="(!isMyCaeate && !isOtherDesiger) || !canEdit"
            @change="handelChangeIsContinuousPublish"
          >
            <el-option label="是" :value="true"> </el-option>
            <el-option label="否" :value="false"> </el-option>
          </el-select>
        </div>
        <div class="continuousRelease">
          <span class="mainDesignTeamName">其它课程设计者：</span>
          <el-select
            v-model="currData.otherDesigerUserIDList"
            placeholder="请选择其它课程设计者"
            :disabled="!isMyCaeate || !canEdit"
            @change="handleSetOtherDesiger"
            multiple
          >
            <el-option
              v-for="item in teacherList"
              :key="item.userID"
              :label="item | filterUserName"
              :value="item.userID"
            >
            </el-option>
          </el-select>
        </div>
        <div class="continuousRelease">
          <span class="mainDesignTeamName">课程类型：</span>
          <el-select
            v-model="currData.courseType"
            placeholder="课程类型"
            :disabled="(!isMyCaeate && !isOtherDesiger) || !canEdit"
            @change="handelChange('courseType')"
          >
            <el-option :label="item" :value="item" v-for="item in courseType" :key="item"></el-option>
          </el-select>
        </div>
        <div class="continuousRelease">
          <span class="mainDesignTeamName">自主学习：</span>
          <el-select
            v-model="currData.allowGenCurr"
            placeholder="课程类型"
            :disabled="(!isMyCaeate && !isOtherDesiger) || !canEdit"
            @change="handelChange('allowGenCurr')"
          >
            <el-option label="是" :value="true"> </el-option>
            <el-option label="否" :value="false"> </el-option>
          </el-select>
        </div>
        <div class="detailBox">
          <!-- <div class="designInfo">
            <div
              class="startMustTips"
              title="必填"
              v-if="isMyCaeate && canEdit && currData.author_name == ''"
            >
              *
            </div>
            <div class="design-title">课程设计团队:</div>
            <div class="myTeam">
              <div class="mainDesign">
                <span class="mainDesignName">主创：</span>
                <el-input
                  type="text"
                  :rows="8"
                  placeholder="主创作者姓名"
                  v-model="currData.author_name"
                  @input="handelChange"
                  :disabled="(!isMyCaeate && !isOtherDesiger) || !canEdit"
                >
                </el-input>
              </div>
              <div class="designTeam">
                <span class="mainDesignTeamName">创作团队：</span>
                <el-select
                  v-model="currData.designTeamID"
                  clearable
                  filterable
                  placeholder="选择创作团队"
                  :disabled="(!isMyCaeate && !isOtherDesiger) || !canEdit"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div class="inputName">课程设计团队</div> -->
          <div class="gudieAnddesc">
            <div class="guidePath">
              <!-- <div
                class="startChoiceTips"
                title="选填"
                v-if="isMyCaeate && canEdit && currData.guidePath == ''"
              >
                *
              </div> -->
              <div class="inputName">课程标准</div>
              <uploadFile
                :acceptTpye="'.pka,.txt,.css,.html,.zip,.rar,.jpg,.jpeg,.png,.gif,.bmp,.pdf,.docx,.xls,.xlsx,.pptx,.mp3,.mp4,.mpeg,.wma,.aac,.wav,.js,.doc,.DOC,.CSS,.HTML,.ZIP,.RAR,.JPG,.JPEG,.PNG,.GIF,.BMP,.PDF,.DOCX,.XLS,.XLSX,.MP3,.MP4,.MPEG,.WMA,.AAC,.WAV'"
                :tips="'上传课程标准'"
                :uploadComponentName="'file'"
                @uploadDataChange="uploadDataChange"
                :currData="currData"
                :isMyCaeate="isMyCaeate"
                :isOtherDesiger="isOtherDesiger"
                :canEdit="canEdit"
                key="file"
              />
            </div>
            <div class="courseDesc">
              <div
                class="startMustTips"
                title="必填"
                v-if="isMyCaeate && canEdit && currData.description == ''"
              >
                *
              </div>
              <div class="inputName">课程简介</div>
              <el-input
                type="textarea"
                :rows="8"
                placeholder="请输入课程简介"
                v-model="currData.description"
                @input="handelChange('description')"
                :disabled="(!isMyCaeate && !isOtherDesiger) || !canEdit"
                :maxlength="300"
                show-word-limit
              >
              </el-input>
            </div>
          </div>
          <div class="coursegoal">
            <!-- <div
              class="startChoiceTips"
              title="选填"
              v-if="isMyCaeate && canEdit && currData.goal == ''"
            >
              *
            </div> -->
            <div class="inputName">教学目标</div>
            <el-input
              type="textarea"
              :rows="8"
              placeholder="请输入教学目标"
              v-model="currData.goal"
              @input="handelChange('goal')"
              :disabled="(!isMyCaeate && !isOtherDesiger) || !canEdit"
              :maxlength="300"
              show-word-limit
            >
            </el-input>
          </div>
        </div>
        <memo
          :currData="currData"
          :isMyCaeate="isMyCaeate"
          :isOtherDesiger="isOtherDesiger"
          :canEdit="canEdit"
          @remarkChange="remarkChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import memo from "./remarks";
import uploadFile from "@/components/uploadFile/uploadFile";
import {
  publishDesigncourse,
  updatedesigncourse,
} from "@/request/designcourse";
import { mapState } from "vuex";
import uploadIcon from "@/components/uploadFile/uploadIcon";
// import { getRegisteredUser } from "@/request/user";
import { getTeacherList } from '@/request/teacher'
export default {
  components: {
    memo,
    uploadFile,
    uploadIcon,
  },
  data() {
    return {
      options: [
        {
          value: 0,
          label: "无",
        },
        {
          value: 1,
          label: "团队1",
        },
      ],
      value: "",
      courseInfo: {
        name: "", // 课程名
        iconPath: "", // 课程封面地址
        description: "", // 课程简介
        goal: "", // 教学目标
        guidePath: "", // 课程标准、课程指南
        designTeamID: "", // 设计团队
        memo: "", // 备注
      },
      saveAll: false, // 保存整个课程数据
      teacherList: [],
      courseType: ['常规', '实训', 'SRP','比赛']
    };
  },
  props: {
    currData: Object, // 选中的数据
    isMyCaeate: Boolean, // 是否自己设计的
    isOtherDesiger: Boolean, // 是否是其它课程设计师
    canEdit: Boolean, // 当前课程状态可否编辑
    isContinuousPublish: {
      type: Boolean,
      default: function () {
        return false;
      },
    },
    parentIconList: Array,
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  filters: {
    filterUserName(item) {
      return item.realName || item.nickName || item.email || item.regName;
    },
  },
  created() {
    this.getUserList();
  },
  methods: {
    handelChange(FieldName) {
      this.$emit(
        "handelChange",
        { currData: this.currData },
        "course",
        FieldName
      );
    },
    // 备注发生变化
    remarkChange(val) {
      this.currData.memo = val;
      // 将数据提交到 数据源组件
      this.handelChange("memo");
    },
    // 文件变化
    uploadDataChange(fileList, name) {
      if (name == "cover") {
        this.currData.iconPath = fileList.url;
        this.handelChange("iconPath");
      }
      if (name == "file") {
        this.currData.guidePath = fileList.join(";");
        this.handelChange("guidePath");
      }
    },
    // 课程持续发布状态发生改变
    handelChangeIsContinuousPublish(val) {
      const value = val;
      // this.currData.isContinuousPublish = !val;
      // 发送请求修改课程状态
      if (this.$route.query.courseID) {
        updatedesigncourse({
          courseID: Number(this.$route.query.courseID),
          isContinuousPublish: value,
        }).then((res) => {
          if (res.errno === 0) {
            this.$nextTick(() => {
              this.currData.isContinuousPublish = value;
            });
          } else {
            this.$antdMessage.error({
              content: res.message,
            });
            return;
          }
        });
      }
      if (val === false && this.$route.query.courseID) {
        if (this.$parent.courseIsContinuousPublishState === true) {
          let courseData = this.$parent.courseDetailData;
          let flag = false;
          for (let i = 0; i < courseData.content.length; i++) {
            if (flag) return;
            for (let ii = 0; ii < courseData.content[i].tasks.length; ii++) {
              if (flag) return;
              if (courseData.content[i].tasks[ii].state === "已发布" && !flag) {
                this.flag = true;
                this.$message({
                  type: "warning",
                  message: "已有已发布的任务，课程不能切换为非持续发布！",
                });
                this.currData.isContinuousPublish = true;
                return;
              }
            }
          }

          courseData.content.forEach((item) => {
            item.tasks.forEach((titem) => {
              titem.isLockedForPublish = true;
            });
          });
        }
      }
      this.handelChange("isContinuousPublish");
    },
    handleCheckIsLock() {
      if (this.currData.isLockedForPublish) {
        this.$message({
          type: "warning",
          message: "任务组已上锁，请点击图标开锁！",
        });
      }
    },
    // 发布课程信息
    async handlePubCourseInfo() {
      let params = {
        courseID: Number(this.$route.query.courseID),
        userID: this.userInfo.userID,
        noSubset: this.saveAll ? false : true, // 只发布课程信息
      };
      if (!params.courseID) {
        await this.$parent.pushCourseInfo();
        params.courseID = Number(this.$route.query.courseID);
      }
      // 课程已创建 未保存 先保存课程
      if (!this.$parent.isSave && params.courseID) {
        var save = await this.$parent.updateCourseInfo(params.courseID);
        // 保存信息失败
        if (!save) return;
      }
      publishDesigncourse(params).then((res) => {
        if (res.errno === 0) {
          this.$antdMessage.success({
            content: "课程信息发布成功!",
          });
          this.saveAll && this.$emit('handlePublishedCourse')
        } else {
          this.$antdMessage.error({
            content: "课程信息发布失败！",
          });
        }
      });
    },
    // 文件变化
    uploadDataChangeIcon(fileList) {
      this.currData.iconPath = fileList.url;
      this.handelChange("iconPath");
    },
    // 获取用户列表
    async getUserList() {
      let roleFlag = 0;
      if (this.userInfo.authNum.indexOf(2) !== -1) {
        roleFlag = 2;
      } else if (this.userInfo.authNum.indexOf(32) !== -1) {
        roleFlag = 32;
      } else if (this.userInfo.authNum.indexOf(64) !== -1) {
        roleFlag = 64;
      } else {
        return this.$antdMessage.warning({
          content: "您没有权限获取用户列表!",
        });
      }
      const data = await getTeacherList({ roleFlag: roleFlag });
      if (data)
        this.teacherList = data.filter(
          (item) => item.userID !== this.userInfo.userID
        );
      else
        this.$antdMessage.error({ content: "获取教师列表失败" });
    },
    handleSetOtherDesiger() {
      this.handelChange("otherDesigerUserIDList")
    },
    handleSave() {
      this.$emit("handleSave")
    }
  },
};
</script>

<style lang="stylus">
$boderColor = solid 1px #b7b2b2;

.courseEdit {
  padding-bottom: 25px;
  max-width: 850px;
  // width: 850px;
  background-color: rgba(234, 238, 243, 1);
  box-shadow: 6px 8px 10px 0px rgba(149, 126, 126, 0 0.15);
  border-radius: 10px;
  border: solid 1px rgba(234, 238, 243, 1);

  .title {
    padding: 17px 0 10px 0;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: PMingLiU-ExtB;
    font-weight: bold;
    font-size: 22px;
    color: #0a0a0a;

    .publish_disaabled {
      button {
        cursor: pointer;
      }
    }
  }

  .info {
    padding: 11px 47px 35px 60px;
    background-color: #ffffff;
    box-shadow: 0px 8px 16px 0px rgba(149, 126, 126, 0.15);
    border-radius: 10px;

    .courseNameBox {
      // height: 131px;
      background-color: #ffffff;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;

      .coursePic {
        .courseIconPath {
          position: relative;
          width: 246px;
          height: 122px;
          background-color: #ffffff;

          // border: solid 1px #707070;
          .uploadComponent {
            .upload-demo {
              .uplaodControll {
                width: 246px;
                height: 122px;
                background-color: #ffffff;
                border: none;
                // box-shadow: 3px 4px 5px 0px rgba(0, 0, 0, 0.16);
                border: $boderColor;
                border-radius: 10px;

                .iconBox {
                  img {
                    width: 64px;
                    height: 62px;
                  }
                }

                .tips {
                  display: none;
                  // margin-top: 11px;
                  // font-family: MingLiU-ExtB;
                  // font-size: 16px;
                  // color: rgba(165, 161, 161, 0.5);
                }
              }

              .fileListBox {
                width: 246px;
                height: 122px;

                .imgFileBox {
                  img {
                    border-radius: 10px;
                  }
                }
              }

              .is-disabled {
                background: unset !important;
              }
            }
          }

          .uploadIconComponent {
            z-index: 99;
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;

            .showImgBox {
              width: 100%;
              height: 100%;

              img {
                border-radius: 10px;
              }
            }
          }
        }
      }

      .courseName {
        position: relative;
        flex: 1;
        max-width: 451px;

        .startMustTips {
          top: unset;
          bottom: 25px;
        }

        .el-input {
          height: 100%;

          .el-input__inner {
            max-width: 451px;
            height: 80px;
            text-align: center;
            background-color: #ffffff !important;
            border-radius: 0;
            border: none;
            border-bottom: solid 1px rgba(112, 112, 112, 0.8) !important;
            font-family: PMingLiU-ExtB;
            font-weight: bold;
            font-size: 22px;
            color: rgba(10, 10, 10, 0.5);
          }

          .el-input__inner::placeholder {
            text-align: center;
            line-height: 131px;
          }
        }
      }
    }

    .continuousRelease {
      margin-top: 29px;

      .mainDesignTeamName {
        font-family: PMingLiU-ExtB;
        font-size: 16px;
        color: #707070;
      }

      .el-select {
        .el-input {
          .el-input__inner {
            height: 30px;
            line-height: 30px;
            border-radius: 5px;
            border: solid 1px #b8b8b8;
          }

          .el-select__caret {
            line-height: 30px;
          }
        }
      }
    }

    .detailBox {
      display: flex;
      flex-flow: column;
      // justify-content: space-between;
      margin-top: 29px;

      .designInfo {
        position: relative;
        padding: 14px 17px;
        max-width: 743px;
        height: 124px;
        background-color: #ffffff;
        // box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.16);
        border: $boderColor;
        border-radius: 10px;

        .design-title {
          margin-bottom: 15px;
          font-family: PMingLiU-ExtB;
          font-size: 16px;
          color: #707070;
        }

        .myTeam {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          width: 100%;

          .mainDesign {
            display: flex;
            align-items: center;

            .mainDesignName {
              display: block;
              width: 60px;
              font-family: PMingLiU-ExtB;
              font-size: 16px;
              color: #707070;
            }

            .el-input {
              width: 185px;
              height: 100%;

              .el-input__inner {
                resize: none;
                // padding: 17px 14px 10px;
                width: 185px;
                height: 30px;
                border: none;
                border-radius: 5px;
                border: solid 1px rgba(184, 184, 184, 0.8);
              }
            }
          }

          .designTeam {
            margin-left: 33px;
            display: flex;
            align-items: center;

            .mainDesignTeamName {
              display: block;
              width: 80px;
              font-family: PMingLiU-ExtB;
              font-size: 16px;
              color: #707070;
            }

            .el-select {
              .el-input {
                .el-input__inner {
                  width: 185;
                  height: 30px;
                  line-height: 30px;
                  border-radius: 5px;
                  border: solid 1px #b8b8b8;
                }

                .el-select__caret {
                  line-height: 30px;
                }
              }
            }
          }

          .el-input__inner {
            font-family: Segoe UI;
            font-size: 14px;
            color: #898989;
          }
        }
      }

      .gudieAnddesc {
        position: relative;
        // margin-top: 48px;
        margin-top: 10px;
        // margin-bottom: 40px;
        display: flex;
        justify-content: space-between;

        .guidePath {
          position: relative;
          width: 246px;
          // height: 121px;
          background-color: #ffffff;

          .uploadComponent {
            .upload-demo {
              .uplaodControll {
                flex-direction: column;
                width: 246px;
                height: 121px;
                background-color: #ffffff;
                border: none;
                // box-shadow: 6px 8px 10px 0px rgba(149, 126, 126, 0.15);
                border: $boderColor;
                border-radius: 10px;

                .iconBox {
                  width: 71px;
                  height: 71px;

                  img {
                    object-fit: contain;
                    width: 71px;
                    height: 71px;
                  }
                }

                .tips {
                  margin-left: 14px;
                  font-family: MingLiU-ExtB;
                  font-size: 16px;
                  color: rgba(165, 161, 161, 0.5);
                }
              }

              .fileListBox {
                width: 246px;
                height: 121px;
                background-color: #ffffff;
                border-radius: 10px;
                // box-shadow: 3px 4px 5px 0px rgba(0, 0, 0, 0.16);
                border: $boderColor;
                color: #7e7e7e;
              }
            }
          }
        }

        .courseDesc {
          position: relative;
          width: 455px;
          // height: 120px;
          background-color: #ffffff;

          .el-textarea {
            border-radius: 10px;
            border: $boderColor;

            .el-textarea__inner {
              resize: none;
              padding: 10px 11px;
              width: 451px;
              height: 120px;
              border: none;
              border-radius: 10px;
              font-family: PMingLiU-ExtB;
              font-size: 14px;
              color: #898989;
            }
          }
        }
      }

      .coursegoal {
        position: relative;
        margin-top: 35px;
        background-color: #ffffff;

        .el-textarea {
          border: none;

          .el-textarea__inner {
            resize: none;
            padding: 10px 11px;
            height: 120px !important;
            border-radius: 10px;
            font-family: PMingLiU-ExtB;
            font-size: 14px;
            color: #7e7e7e;
            border: none;
            border-radius: 10px;
            // box-shadow: 3px 4px 5px 0px rgba(0, 0, 0, 0.16);
            border: $boderColor;
          }
        }
      }

      .el-textarea__inner::-webkit-scrollbar {
        width: 2px;
        height: 1px;
      }

      /* 定义滚动条的滑块的样式有圆角和阴影以及自定义的背景色 */
      .el-textarea__inner::-webkit-scrollbar-thumb {
        -webkit-box-shadow: inset 0 0 1px rgba(195, 197, 198, 0.1);
        background: #f9f9f9;
        border-radius: 10px;
      }

      /* 定义滚动条所在轨道的样式。有圆角和阴影以及淡色系的背景色 */
      .el-textarea__inner::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 1px rgba(195, 197, 198, 0.1);
        border-radius: 4px;
      }
    }

    .remarksCompontent {
      margin-top: 20px;
    }
  }
}
</style>